<template>
    <div class="add-container">
      <appHeader>添加收货地址</appHeader>
      <div class="herder">
        <ul>
          <li class="li"><label for="man">收货人</label><input autocomplete="off" type="text" id="man" placeholder="请填写收货人姓名" v-model="userInfo.receiver"></li>
          <li class="li"><label for="number">手机号码</label><input autocomplete="off" type="text" id="number" placeholder="请填写手机号码" v-model="userInfo.phoneNumber"></li>
          <li class="li"><label for="region">所在地区</label><input autocomplete="off" type="text" id="region" placeholder="请选择所在地" v-model="userInfo.location"></li>
          <li class="xiangxi">
            <span class="title-box">详细地址</span><br>
            <input autocomplete="off" type="text" class="box" placeholder="街道楼号" v-model="userInfo.details">
          </li>
        </ul>
      </div>
      <div class="botton" @click="putaddr">保存</div>
      <transition>
      <div class="add-mask" v-if="isidle">
        <div class="mask-container">
          <img src="../assets/X(2).png" alt="" class="x" @click="isidle = false">
          <span class="title">提示</span>
          <span class="success">收货地址保存成功</span>
          <router-link to="/auth/addRess"><div class="qr" @click ="addRess">确认</div></router-link>
        </div>
      </div>
      </transition>
    </div>
</template>

<script>
import appHeader from '../components/appHeader';
    export default {
      name: "addAddress",
      data() {
        return {
          isidle: false,
          userInfo: {
            receiver: '',
            phoneNumber: '',
            location: '',
            details: '',
          }
        }
      },
      methods: {
        addRess(){
          this.isidle = false;
         /* // this.$router.push({
          //   path:'/addRess',
          //   name: 'addRess',
          //   params:{
          //     userInfo: this.userInfo,
          //   }
          // });*/
        },
        putaddr(){
          if (!this.userInfo.receiver) {
            this.$toast({
              message: '请填写收货人姓名',
              duration: 1000,
              color: '#fff',
            })
          }else if (!this.userInfo.phoneNumber) {
            this.$toast({
              message: '请填写手机号码',
              duration: 1000,
              color: '#fff',
            })
          }else if (!this.userInfo.location) {
            this.$toast({
              message: '请填写所在地',
              duration: 1000,
              color: '#fff',
            })
          }else if (!this.userInfo.details) {
            this.$toast({
              message: '请填写详细地址',
              duration: 1000,
              color: '#fff',
            })
          }else {
            this.$apis.putaddr(this.userInfo)
              .then( data => {
                console.log(data);
                this.$router.push({name: 'addRess'});
              })
              .catch( error => console.log(error));
          }
        },
      },
      components: {
        appHeader,
      },
    }
</script>

<style>
 *{
   margin: 0;
   padding: 0;
   list-style: none;
   border: none;
   outline: none;
 }
  .add-container{
    width: 100vw;
    height: 100vh;
  }
  .herder{
    width: 100vw;
    height: 5.5333rem;
    border-top: 1px solid #e6e6e6;
    position: relative;
    top: 1.4rem;
    overflow: hidden;
  }
  .herder>ul{
    position: relative;
    left: .3rem;
  }
  .herder>ul>li{
    width: 96vw;
    position: relative;
    line-height: 1.0933rem;
    font-size: .3733rem;
    color: #3e3e3e;
  }
  label{
    display: inline-block;
    width: 2rem;
  }
  li{
    border-bottom: 1px solid #e7e7e7;
    z-index: 9;
  }
 .herder>ul>li>input{
   position: relative;
   height: .5rem;
   left: .6rem;
 }
  .xiangxi{
    display: inline-block;
    position: relative;
    height: 2rem;
  }
  .xiangxi>input{
    position: relative;
    display: inline-block;
    width: 6rem;
    height: 1.1rem;
    margin-left: -.6rem;
    top: -.4rem;
  }
  .botton{
    display: inline-block;
    position: relative;
    width: 7.58666rem;
    height: .988rem;
    text-align: center;
    line-height: .988rem;
    color: white;
    background: #3c9dfc;
    border-radius: .6rem;
    top: 2.4rem;
    left: 1.02rem;
    font-size: .4rem;
  }
 .add-mask{
   width: 100vw;
   height: 100vh;
   background: rgba(0,0,0,.3);
   position: absolute;
   top: 0;
   left: 0;
 }
 .mask-container{
   width: 90%;
   height: 5rem;
   background: white;
   position: relative;
   top: 25%;
   left: 5%;
   border-radius: 5px;
   text-decoration: none;
 }
 .x{
   width: .5rem;
   height: .5rem;
   position: absolute;
   right: 10px;
   top: 10px;
 }
 .mask-container>span{
   display: block;
   width: 90vw;
   text-align: center;
 }
 .title{
   position: relative;
   top: 1.2rem;
   font-size: .4rem;
 }
 .success{
   position: relative;
   top: 1.7rem;
   font-size: .35rem;
 }
 .qr{
   width: 70vw;
   height: 1rem;
   position: relative;
   top: 2.6rem;
   left: 10vw;
   font-size: .4rem;
   background: deepskyblue;
   line-height: 1rem;
   text-align: center;
   border-radius: .5rem;
   color: white;
 }
 .title-box{
   display: inline-block;
   width: 100vw;
   height: 20px;
   z-index: 3;
 }
 .box{
   display: inline-block;
   position: absolute;
   width: 5rem;
   height: 1rem;
   margin-left: -2rem;
   margin-top: .4rem;
 }
 .v-enter-active,.v-leave-active {
   transition: all .7s;
 }
 .v-enter,.v-leave-to{
   opacity:0 !important;
}
.v-enter-to,.v-leave{
    margin-left:0px;
}
.show-enter-active,.show-leave-active{
    transition:all .7s;
}
.show-enter,.show-leave-to{
  opacity: 500;
}
.show-enter-to,.show-leave{
    margin-left:0px;
}
</style>
